<template>
	<view>
		<view class="cartBarStyles">
			<!-- 去凑单 -->
			<view class="single">
				<view>
					<view>已减9.6元，再买9元减13.6元</view>
					<view>
						<view>去凑单</view>
						<view></view>
					</view>
				</view>
				<view>已包含：配送费减3.6、满25减2</view>
			</view>
			
			<!-- 起送 -->
			<view class="sendTop" :show="!!cartNum" v-if="sendType==0">
				<view class="left">
					<view class="detail-action" @tap="details">
						<image src="/static/images/common/zu.png" class="shopbag-btn"></image>
						<view class="badge">{{ cartNum }}</view>
					</view>
					<view style="margin-left: 20upx;">
						<view class="price">￥{{ cartPrice }}</view>
						<view class="shipping">免配送费 | 支持自取</view>
					</view>
				</view>
				<view v-if="cartPrice >= 20" class="settlement" @tap="settlement">结算</view>
				<view v-else class="tosend">￥20起送</view>
			</view>
			<!-- 超出范围 -->
			<view class="sendTop" v-if="sendType==1">
				<view class="map">
					超出配送范围 >
				</view>
			</view>
			
			<!-- 本店已暂停营业 > -->
			<view class="sendTop" v-if="sendType==2">
				<view class="map">
					本店已暂停营业 >
				</view>
			</view>
			
			<!-- 本店已打样 > -->
			<view class="sendTopSet" v-if="sendType==3">
				<view class="map">
					本店已打样 >
				</view>
				<view class="map_one">
					营业时间：08:00-11:00  14:00-21:00
				</view>
			</view>
		</view>

		<cart-popup :cart="cart" ref="cartPopup" @add="add" @minus="minus" @clear="clear"></cart-popup>
	</view>
</template>

<script>
import cartPopup from '../cart-popup/cart-popup.vue';
import { mapActions, mapState } from 'vuex';
export default {
	name: 'CartBar',
	components: {
		cartPopup
	},
	props: {
		cart: {
			type: Array,
			default: () => []
		}
	},
	onLoad() {
		console.log(this.cart,333)
	},
  
	computed: {
		 
		cartNum() {
			//计算购物车总数
			return this.cart.reduce((acc, cur) => acc + cur.number, 0);
		},
		cartPrice() {
			//计算购物车总价
			return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0);
		}
	},
	data() {
		return {
			sendType:0,
			reduced:true
		};
	},
	methods: {
		details() {
			if(this.cartNum==0){
				this.$refs['cartPopup'].close();
			}else{
				this.reduced = false
				this.$refs['cartPopup'].open();
			}
			
		},
		// 跳转结算
		settlement(){
			uni.navigateTo({
				url:"/pages/Order/settlement"
			})
		},
		add(product) {
			this.$emit('add', { ...product, number: 1 });
		},
		minus(product) {
			this.$emit('minus', product);
		},
		clear() {
			this.$emit('clear');
		},
		pay() {
			this.$emit('pay');
		}
	},
	watch: {
		cartNum(val) {
			if (!val) {
				this.$refs['cartPopup'].close();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.left {
	display: flex;
	align-items: center;

	.detail-action {
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;	
		.shopbag-btn {
			width: 104upx;
			height: 78upx;
		}
		.badge {
			background-color: $color-primary;
			font-size: $font-size-sm;
			color: $bg-color-white;
			line-height: 1rem;
			width: 1rem;
			text-align: center;
			border-radius: 100%;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.price {
		font-size: $font-size-extra-lg;
		font-weight: bold;
		color: $text-color-base;
	}
	.shipping {
		font-size: 22upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}
}

.right {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 70rpx;
	border-radius: 0 !important;
	font-size: $font-size-extra-lg;
}
.cartBarStyles {
	
	border-radius: 4upx;
	padding: 24upx 0upx;
	.single{
		background: #F2E9E3;
		padding: 24upx 0upx;
		border: 1upx solid #FFB496;
		height: 200upx;
		border-radius: 0upx 0upx 56upx 56upx;
		position: fixed;
		bottom: 130upx;
		left: 0;
		right: 0;
		width: 90%;
		margin: 0 auto;
		z-index: 1;
		&>view:nth-child(1){
			display: flex;
			align-items: center;
			justify-content: center;
			
			&>view:nth-child(1){
				font-size:24upx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:#333333;
			}
			&>view:nth-child(2){
				font-size:24upx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:#FF5F2F;
				margin-left: 18upx;
			}
		}
		&>view:nth-child(2){
			font-size:24upx;
			font-family:Source Han Sans CN;
			font-weight:400;
			color:#999999;
			margin-top: 13upx;
			text-align: center;
		}
	}
	
	.sendTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 104upx;
		background: rgba(0, 0, 0, 1);
		box-shadow: 0px 6upx 14upx 0upx rgba(0, 0, 0, 0.4);
		border-radius: 52upx;
		padding: 10upx 0upx 10upx 35upx;
		position: fixed;
		bottom: 120upx;
		left: 0;
		right: 0;
		width: 90%;
		margin: 0 auto;
		z-index: 995;
		.settlement {
			width: 133upx;
			height: 104upx;
			background: rgba(255, 91, 9, 1);
			font-size: 28upx;
			font-family: PingFang;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			border-radius: 0upx 52upx 52upx 0upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.tosend {
			font-size: 24upx;
			font-family: PingFang;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			margin-right: 32upx;
		}
		// 超出范围
		.map{
			
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center!important;
			margin: 0 auto;
		}
		.map_one{
			
			font-size: 22upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.7;
			isplay: flex;
			align-items: center;
			justify-content: center;
			text-align: center!important;
			margin: 0 auto;
		}
	}
	// 打烊
	.sendTopSet{;
		
		background: rgba(0, 0, 0, 1);
		box-shadow: 0px 6upx 14upx 0upx rgba(0, 0, 0, 0.4);
		border-radius: 52upx;
		padding: 19upx 0upx 19upx 35upx;
		.map{
			
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center!important;
			margin: 0 auto;
		}
		.map_one{
			
			font-size: 22upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.7;
			isplay: flex;
			align-items: center;
			justify-content: center;
			text-align: center!important;
			margin: 0 auto;
		}
	}
}
</style>
